<header class="data-table-header p+">
    <div class="data-table-header__label">
        <span class="fs-title">{{objectConfig.base.comment}}</span>
        <span class="fs-caption">{{objectConfig.base.name}}</span>
    </div>

    <div class="data-table-header__actions">
    	<button class="btn btn--l btn--black btn--icon" lx-ripple>
            <i class="mdi mdi-magnify"></i>
        </button>
     	<button class="btn btn--l btn--black btn--icon" ng-click="show()" lx-ripple>
            <i class="mdi mdi-plus"></i>
        </button>
        <button class="btn btn--l btn--black btn--icon" lx-ripple>
            <i class="mdi mdi-pencil"></i>
        </button>
        <button class="btn btn--l btn--black btn--icon" lx-ripple>
            <i class="mdi mdi-delete"></i>
        </button>
        <button class="btn btn--l btn--black btn--icon" lx-ripple>
            <i class="mdi mdi-filter-variant"></i>
        </button>

        <lx-dropdown position="right" over-toggle="true">
            <button class="btn btn--l btn--black btn--icon" lx-ripple lx-dropdown-toggle>
                <i class="mdi mdi-dots-vertical"></i>
            </button>

            <lx-dropdown-menu>
                <ul>
                    <li><a class="dropdown-link">Action</a></li>
                    <li><a class="dropdown-link">Another action</a></li>
                    <li><a class="dropdown-link">Something else here</a></li>
                    <li class="dropdown-divider"></li>
                    <li><a class="dropdown-link dropdown-link--is-header">Header</a></li>
                    <li><a class="dropdown-link">Separated link</a></li>
                </ul>
            </lx-dropdown-menu>
        </lx-dropdown>
    </div>
</header>

<table class="data-table" >
    <thead>
        <tr class="">
            <th class="" ng-if="!field.is_hide" ng-repeat="field in objectConfig.fields">
                <span ng-if="field.relate">
                    {{field.relate.comment}}<br />{{field.relate.name}}
                </span>
                <span ng-if="!field.relate">
            	    {{field.comment}}<br />{{field.name}}
                </span>
            </th>
            <th>
            	操作<br />opera
            </th>
        </tr>
    </thead>

    <tbody>
        <tr class="" ng-repeat="object in objects" >
            <td ng-if="!field.is_hide" ng-repeat="field in objectConfig.fields">
            	<span ng-hide="field.is_img">
                    {{object[field.name]}}
                </span>
                <span ng-if="field.relate">
                    {{object[field.relate.table+'_'+field.relate.select]}}
                </span>
                <span ng-if="field.type == 'tinyint(1)'">
                    {{object[field.name]==1?"是":"否"}}
                </span>
                <!--
            	<img src="{{object[field.name]}}" ng-if="field.is_img" />
                -->
            </td>
          	<td>
          		<button class="btn btn--l btn--black btn--icon" ng-click="show(object)" lx-ripple>
                	<i class="mdi mdi-pencil"></i>
            	</button>
            	<button class="btn btn--l btn--black btn--icon" ng-click="destroy(object)" lx-ripple>
                	<i class="mdi mdi-delete"></i>
            	</button>
          	</td>
        </tr>
    </tbody>
</table>

<lx-dialog class="dialog dialog--l" id="showDialog" auto-close="true">
    <div class="dialog__header">
        <div class="toolbar bgc-teal-A700 pl++">
            <span class="toolbar__label tc-white fs-title">
                {{object.id?"更新":"添加"}}
            </span>
        </div>
    </div>

    <div class="dialog__content p++">
	    <div flex-item  ng-repeat="field in objectConfig.fields">
            
            <!--text-field-->
	        <lx-text-field ng-if="typeFileter(field.type) == 'input' || typeFileter(field.type) == 'bool'" label="{{field.comment}} / {{field.name}}" >
	            <input type="text"  ng-model="object[field.name]">
	        </lx-text-field>

            <!--textare-field-->
            <lx-text-field ng-if="typeFileter(field.type) == 'textarea' || field.type == 'text' " label="{{field.comment}} / {{field.name}}" >
                <textarea ng-model="object[field.name]"></textarea>
            </lx-text-field>

            <!--int-field-->
            <lx-text-field ng-if="typeFileter(field.type) == 'int' && !field.relate" label="{{field.comment}} / {{field.name}}" disabled="field.name == 'id'" >
                <input type="text"  ng-disabled="field.name == 'id'" ng-model="object[field.name]">
            </lx-text-field>

            <!--datetime-field-->
            <lx-text-field ng-if="field.type == 'datetime'" label="{{field.comment}} / {{field.name}}" >
                <input type="datetime"  ng-model="object[field.name]">
            </lx-text-field>

            <!--bool-field-->
            <div class="switch" ng-if="typeFileter(field.type) == 'boolv'">
                <input type="checkbox" id="switch_{{field.name}}" class="switch__input" ng-model="object[field.name]" >
                <label for="switch_{{field.name}}" class="switch__label">{{field.comment}} / {{field.name}}</label>
            </div>

            <!--select-->
            <lx-select ng-if="field.relate" ng-model="object[field.name]" placeholder="{{field.relate.comment}} / {{field.relate.name}}"
                       choices="ajax.list"  filter="ajax.update(field.relate, newValue, oldValue)" loading="{{ ajax.loading }}"
                       min-length="0" allow-clear="true" selection-to-model="ajax.toModel(field.relate, data, callback)"
                       model-to-selection="ajax.toSelection(field.relate, data, callback)">
                <lx-select-selected>
                    {{ $selected[field.relate.select] }}
                </lx-select-selected>

                <lx-select-choices>
                    {{ $choice[field.relate.select] }}
                </lx-select-choices>
            </lx-select>
            {{field.null == "NO"?"*":""}}
	    </div>
    </div>

    <div class="dialog__actions">
        <button class="btn btn--m btn--black btn--flat" lx-ripple lx-dialog-close>取消</button>
        <button class="btn btn--m btn--blue  btn--flat" ng-click="store(object)" lx-ripple>提交</button>
    </div>
</lx-dialog>